<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta id="posViewPort" name="viewport" content="initial-scale=1.0,user-scalable=no,minimum-scale=1.0, maximum-scale=1.0,width=device-width">
    <title>web_ctrl</title>
    <style type="text/css">
        .error {
            border: 3px solid #f00;
        }
        .hide{
            display:none;
        }
        .num_text {
            width: 100%;
        }
        .concent_btn {
            width: 100%;
        }
        .disconcent_btn {
            width: 100%;
        }
        .page_up_btn {
            width: 100%;
            height: 100px;
        }
        .page_down_btn {
            width: 100%;
            height: 100px;
        }
        .enter_btn {
            width: 100%;
            height: 256px;
        }
    </style>
</head>
<body>
<div class="num_list tab">
    <button class="concent_show_btn">连接</button>
    <button class="page_show_btn">翻页</button>
    <button class="mouse_show_btn">鼠标</button>
</div>
<div class="num_list log_panel log_list">
    <div class="num_item">
        <span>日志:</span>
        <textarea class="num_text" id="log"></textarea>
    </div>
</div>
<div class="num_list tab_panel concent_list">
    <br>
    <div class="num_item">
        <span>ip</span>
        <input type="text" class="num_text" id="ip" value="192.168.102.63">
    </div>
    <div class="num_item">
        <span>port</span>
        <input type="text" class="num_text" id="port" value="19090">
    </div>
    <div class="num_item">
        <span>password</span>
        <input type="password" class="num_text" id="pswd" value="123456">
    </div>
    <br>
    <button class="concent_btn">连接</button>
    <br>
    <br>
    <button class="disconcent_btn">断开</button>
</div>
<div class="num_list tab_panel page_list hide">
    <button class="page_up_btn">上一页</button>
    <br>
    <button class="page_down_btn">下一页</button>
    <br>
    <button class="enter_btn">回车</button>
</div>
<div class="num_list tab_panel mouse_list hide">
</div>
<script type="text/javascript" src="/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
    var connecter;
    $(document).ready(function() {
        $('.concent_show_btn').click(function () {
            $('.tab_panel').hide();
            $('.concent_list').show();
        });
        $('.page_show_btn').click(function () {
            $('.tab_panel').hide();
            $('.page_list').show();
        });
        $('.mouse_show_btn').click(function () {
            $('.tab_panel').hide();
            $('.mouse_list').show();
        });
        $('.concent_btn').click(function () {
            var ip = $('#ip').val();
            var port = $('#port').val();
            var pswd = $('#pswd').val();
            connecter = new Connect(ip, port, pswd);
            connecter.get_connect();
        });
        $('.disconcent_btn').click(function () {
            connecter.disconcent();
        });
        $('.page_up_btn').click(function () {
            connecter.page_up_msg();
        });
        $('.page_down_btn').click(function () {
            connecter.page_down_msg();
        });
        $('.enter_btn').click(function () {
            connecter.enter_msg();
        });
    });
    function Connect(ip, port, pswd) {
        this.ip = ip;
        this.port = port;
        this.pswd = pswd;
        this.socket_flg = false;
        this.socket = null;
        this.interval = null;
        var self = this;

        this.get_url = function(path) {
            var url = 'ws://' + this.ip;
            //if (port != 80) {
            url += ":" + this.port;
            //}
            url += path;
            return url;
        };
        this.get_connect = function() {
            console.log('socket_get_connect');
            var url = this.get_url("");
            this.socket = new WebSocket(url);
            this.socket.onopen = function(evt) {
                console.log('socket_onopen');
            };
            this.socket.onclose = function(evt) {
                console.log("socket_onclose");
                clearInterval(self.interval);
                $("#log").val("close");
            };
            this.socket.onmessage = function(evt) {
                console.log("socket_onmessage");
                console.log('evt:',evt);
                if(evt.data=="open"){
                    self.socket.send('password:'+self.pswd);
                    self.interval = setInterval(self.heart_msg,2000);
                }
                $("#log").val(evt.data);
            };
        };
        this.disconcent = function() {
            // this.socket.close();
            self.socket.send('close');
        };

        this.heart_msg = function(){
            self.socket.send('heart');
        };

        this.page_up_msg = function() {
            self.socket.send('page_up');
        };

        this.page_down_msg = function() {
            self.socket.send('page_down');
        };

        this.enter_msg = function() {
            self.socket.send('enter');
        };
    }
</script>
</body>
</html>